/*
 * @Description:  包含我的位置、地图选点按钮组件
 * @Author: buwei.huang
 * @Date: 2019-07-12 14:18:59
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-30 16:23:16
 */
<template>
  <div
    class="btn_wrap flex-h"
    v-show="isShow"
  >
    <div
      class="btn_item btn_left flex-h flex-vc flex-he"
      @click="selectMySite"
    >
      <i class="icon iconfont icon-mypoint baseColorNoAcitve fontsize44" />
      <span class="fontsize28">我的位置</span>
    </div>
    <div
      class="btn_item btn_right flex-h flex-vc"
      @click="goToPage"
    >
      <i class="iconColor icon iconfont icon-dituxuandian fontsize44" />
      <span class="fontsize28">地图选点</span>
    </div>
  </div>
</template>
<script>
// import { getLocation } from 'vue-xiaobu-utils'
import { Indicator } from 'mint-ui'
import AMap from 'AMap'
export default {
  props: {
    routeType: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      pos: {},
      isShow: false,
      mySiteName: '',
      gps: [],
      GDgps: []
    }
  },
  mounted() {
    Indicator.open()
    this._getCurrentPosition()
    this.$EventBus.$on('isShow', () => {
      this.isShow = true
    })
  },
  methods: {
    goToPage() {
      // this.$AppRouterUtils.open('mapChooseSite.html?_tv=true&_rv=false&ROUTETYPE=' + this.routeType)
      this.$router.push({ name: 'mapChooseSite' })
    },
    selectMySite() {
      console.log(this.mySiteName)
      if (this.mySiteName) {
        let data = {
          NAME: this.mySiteName,
          LONGITUDE: this.GDgps[0],
          LATITUDE: this.GDgps[1]
        }
        console.warn('pre>>>', data)
        this.$EventBus.$emit('siteName', data)
        this.$router.go(-1)
      } else {
        this.showToast('定位失败请重新获取~')
      }
    },
    // goPage() {
    //   let data = {
    //     NAME: this.pos.add,
    //     LONGITUDE: this.pos.longitude,
    //     LATITUDE: this.pos.latitude
    //   }
    //   this.$EventBus.$emit('siteName', data)
    //   this.$router.go(-1)
    // },
    _getCurrentPosition() { // 获取当前gps位置
      // 1、微信获取当前坐标
      this.$WX.then(WX => {
        WX.getLocation('wgs84', res => {
          console.log('res>>>>>', res)
          // this.$store.dispatch('fetchPos', pos)
          this.pos = res
          this.gps = [res.longitude, res.latitude]
          console.warn('this.gps>>>>', this.gps)
          let self = this
          // 2、WX坐标转换为高德的坐标
          AMap.convertFrom(this.gps, 'gps', function (status, result) {
            if (result.info === 'ok') {
              var GDgpsList = [result.locations[0].lng, result.locations[0].lat]
              self.GDgps = GDgpsList
              console.warn('self.GDgps', self.GDgps)

              // 3、获取地理位置
              AMap.plugin('AMap.Geocoder', function () {
                var geocoder = new AMap.Geocoder({
                  // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                  city: '全国'
                })
                geocoder.getAddress(GDgpsList, function (status, result) {
                  console.log(status)
                  if (status === 'complete' && result.info === 'OK') {
                    // result为对应的地理位置详细信息
                    console.warn('result.regeocode.formattedAddress>>>', result.regeocode.formattedAddress)
                    self.mySiteName = result.regeocode.formattedAddress
                    Indicator.close()

                    console.warn('self.mySiteName', self.mySiteName)
                  } else {
                    this.showToast('获取定位失败~')
                    Indicator.close()
                  }
                })
              })
            } else {
              this.showToast('获取定位失败~')
              Indicator.close()
            }
          })
        })
      }, err => {
        console.error(err)
        Indicator.close()
      }, () => {
      })
    }
  }
}
</script>
<style scoped>
.btn_wrap {
  height: 112px;
  background-color: #fff;
}
.btn_item {
  width: 50%;
  height: 100%;
}
.btn_item .icon {
  margin-right: 12px;
}
.btn_left {
  padding-right: 77px;
}
.btn_right {
  padding-left: 77px;
}
.btn_wrap .iconColor {
  color: #f5a623;
}
</style>
